<template>
  <div class="wwhContainer">
    <!-- 头部 -->
    <WorthHeader>值得买</WorthHeader>
    <!-- swiper部分 -->
    <div class="wwhSwiper">
      <!-- 背景图片文字 -->
      <div class="bgSwiper">
        <img class="logo" src="@/assets/worthPhone/logo.png" alt="" />
        <div class="text">严选好物&nbsp用心生活</div>
        <img class="bgImg" src="@/assets/worthPhone/bgColor.jpg" alt="" />
      </div>
      <!--swiper  -->
      <div class="fontSwiper">
        <!-- vant组件部分 开始 -->
        <van-swipe class="swiper" :loop="false" :width="'90'">
          <!-- swiper项 -->
          <van-swipe-item
            class="swiperItem"
            v-for="(item, index) in SwiperDataNew"
            :key="index"
          >
            <!-- 项内块 -->
            <div class="swiperItemContent">
              <div class="swiperItemContentUP">
                <img :src="item[0]?.picUrl" alt="" />
                <div class="title">{{ item[0]?.mainTitle }}</div>
                <div class="descript">{{ item[0]?.viceTitle }}</div>
              </div>
              <div class="swiperItemContentDown">
                <img :src="item[1]?.picUrl" alt="" />
                <div class="title">{{ item[1]?.mainTitle }}</div>
                <div class="descript">{{ item[1]?.viceTitle }}</div>
              </div>
            </div>
          </van-swipe-item>

          <template #indicator="{ active, total }">
            <!-- {{ active + 1 }}/{{ total - 3 }} -->
            <div class="custom-indicator">
              <div class="barContainer">
                <div
                  class="bar"
                  :class="{
                    current: active < 4 ? active === index : index === 3,
                  }"
                  v-for="(item, index) in 4"
                  :key="index"
                ></div>
              </div>
            </div>
          </template>
        </van-swipe>

        <!-- vant组件部分 结束 -->
      </div>
    </div>

    <!-- main 的flow 部分-->
    <div class="wwhMain">
      <div
        class="waterFlow"
        v-masonry
        transiton-duration="0s"
        item-selector=".card"
        gutter="0"
        origin-top="false"
        column-width=".card"
      >
        <!-- fit-width="true" -->
        <!-- cart内容 -->
        <!--  -->
        <div
          v-masonry-tile
          class="card"
          v-if="waterFlowDataList[0]"
          v-for="(item, index) in waterFlowDataList[0].topics"
          :key="index"
        >
          <!-- {{ waterFlowDataList[0].topics }} -->
          <div class="cardItemOut">
            <div class="cardItemIn">
              <van-image class="cardItemInImage" :src="item?.picUrl">
                <template v-slot:error>加载失败</template>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>

              <div class="title">
                <div class="text">{{ item.title }}</div>
              </div>
              <div class="holer"></div>
              <div class="info">
                <div class="base">
                  <div class="avatar">
                    <img class="avatarImage" :src="item.avatar" alt="" />
                  </div>
                  <div class="author">{{ item.nickname }}</div>
                </div>
                <div class="view">
                  <van-icon name="eye-o" />{{
                    item.readCount > 1000
                      ? Math.floor(item.readCount / 1000) + "k"
                      : item.readCount
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Following />
  </div>
</template>

<script lang="ts">
import _ from "lodash";
// import following from "@/components/Following/index.vue";
import { defineComponent, onMounted, onUnmounted } from "vue";
import type { NavList$1Type } from "@/api/modules/worthType";

export default defineComponent({
  name: "VWorth",
});
</script>
<script setup lang="ts">
import { computed } from "vue";
// import type { itemType } from "@/api/modules/worthType";

// 调用仓库方法 请求数据
import { storeToRefs } from "pinia";
// 导入仓库
import useWorthStore from "@/stores/modules/worth";
const store = useWorthStore();
// 调用获取swiper数据 和瀑布流数据
store.getSwiperData();
store.getWaterData();

// 获取swiper数据 和瀑布流数据
const { SwiperList, waterFlowDataList } = storeToRefs(store);
// console.log(waterFlowDataList.value, `waterFlowDataList.value`);

// 处理swiper。数据
let SwiperDataNewArray: [NavList$1Type[]] = [] as unknown as [NavList$1Type[]];
let SwiperDataNew = computed(() => {
  SwiperList.value.map((item, index) => {
    if (index <= 6) {
      SwiperDataNewArray.push([item]);
      // console.log(SwiperDataNew);
    } else {
      SwiperDataNewArray[index - 7].push(item);
    }
  });
  return SwiperDataNewArray;
});

// 解决报错
// let waterFlowData = computed(() => {
//   waterFlowDataList.value[0].topics;
//   return;
// });

// 触底逻辑判断
const sole = () => {
  // console.log(
  //   document.documentElement.scrollTop,
  //   `document.documentElement.scrollTop`
  // );
  // console.log(
  //   document.documentElement.clientHeight,
  //   `document.documentElement.clientHeight`
  // );
  // console.log(document.body.scrollHeight, `document.body.scrollHeight`);
  if (
    document.documentElement.scrollTop +
      document.documentElement.clientHeight >=
    document.body.scrollHeight - 10
  ) {
    // 此处获取更多的数据
    // console.log(111);
    store.getMoreData();
  }
};
onMounted(() => {
  window.addEventListener("scroll", soleCopy, false);
});

onUnmounted(() => {
  window.removeEventListener("scroll", soleCopy, false);
});

// lodash节流
const soleCopy = _.throttle(sole, 300);
</script>
<style lang="less" scoped>
.wwhContainer {
  height: 100%;
  // swiper
  .wwhSwiper {
    // 头部的padding
    padding: 1.95rem 0 0 0;
    // height: 342px;
    // background-color: aqua;
    position: relative;
    width: 100%;
    .bgSwiper {
      width: 100%;
      position: absolute;
      z-index: -1;
      // background-color: cadetblue;
      // 定位
      top: 0;
      .bgImg {
        width: 100%;
      }
      .text {
        position: absolute;
        font-size: 0.5rem;
        color: white;
        top: 0.89rem;
        left: 2.5rem;
      }
      .logo {
        position: absolute;
        top: 0.7rem;
        left: 0.66rem;
        width: 1.8rem;
      }
    }
    .fontSwiper {
      border-radius: 0.1rem;
      height: 270px;
      margin: 0 0.3rem;
      background-color: #fff;
      position: relative;
      // swiper组件
      .swiper {
        height: 270px;

        .vant-swiper {
          height: 270px;
        }
        .custom-indicator {
          display: flex;
          align-items: center;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 0px;
          background: white;
          .barContainer {
            margin: 0 auto;
            display: flex;
            .bar {
              width: 19px;
              height: 2px;
              background-color: #d9d9d9;
            }
            .current {
              width: 19px;
              height: 2px;
              background-color: red;
            }
          }
        }
        .swiperItem {
          // swiper每一页
          .swiperItemContent {
            width: 90px;
            height: 235px;
            padding: 18px 3px 3px 3px;
            box-sizing: border-box;
            .swiperItemContentUP {
              width: 84px;
              height: 100px;
              text-align: center;
              img {
                width: 60px;
                height: 60px;
              }
              .title {
                font-size: 14px;
                font-weight: 700;
              }
              .descript {
                font-size: 12px;
              }
            }
            .swiperItemContentDown {
              .swiperItemContentUP;
              margin-top: 14px;
            }
          }
        }
      }
      .custom-indicator {
        position: absolute;
        right: 5px;
        bottom: 5px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .wwhMain {
    width: 100%;
    .waterFlow {
      margin: 10px auto;
      .card {
        margin: 0.2rem 0.2rem 0;
        .cardItemOut {
          // background-color: chocolate;
          width: 170px;
          // height: 180px;
          border-radius: 5px;
          .cardItemIn {
            .cardItemInImage {
              border-radius: 5px;
              display: block;
              width: 170px;
            }
            .title {
              padding: 10px 8px 0px;
              color: #333;
              .text {
                font-size: 13px;
              }
            }
            .holer {
              height: 10px;
            }
            .info {
              padding: 9px 8px 13px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .base {
                display: flex;
                align-items: center;
                .avatar {
                  .avatarImage {
                    width: 26px;
                    height: 26px;
                    border-radius: 50%;
                    // vertical-align: middle;
                  }
                }
                .author {
                  font-size: 12px;
                  margin-left: 5px;
                }
              }
              .view {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
